import React, { FC, memo } from 'react';
import { Radio } from 'antd';
import styles from './pageInnerHeader.module.less';
import { OrderOptions } from '@/types/OrderOptions';

interface iGroupHeader {
  headerActive: string;
  title: string | undefined;
  onChange: (value: string) => void;
  options: OrderOptions[];
}

const GroupHeader: FC<iGroupHeader> = (props) => {
  const { headerActive, title, onChange, options } = props;

  return (
    <div className={`flex ai-center ${styles.pageInnerHeader}`}>
      <div className={styles.headerTitle}>{title}</div>

      <Radio.Group
        onChange={(e) => onChange(e.target.value + '')}
        size="large"
        value={headerActive}
        optionType="button"
        buttonStyle="solid"
        style={{ marginBottom: 0 }}
      >
        {(options || []).map((option) => {
          return (
            <Radio.Button
              style={{ fontSize: '14px' }}
              key={option.value}
              value={option.value}
            >
              {option.text}
            </Radio.Button>
          );
        })}
      </Radio.Group>
    </div>
  );
};
export default memo(GroupHeader);
